class Observer{
  constructor(data){
    this.observer(data)
  }
  // 将所有的data数据属性进行get set重写
  observer(data){
    // console.log(data)
    if(!data || typeof data !== 'object')return
    Object.keys(data).forEach(key=>{
      // 劫持对象
      this.defineReactive(data,key,data[key]);
    })
  }
  // 定义响应式
  defineReactive(obj,key,value){
    let that = this;
    let dep = new Dep(); // 每个变化的数据，都是一个发布订阅模式
    // 使用回调进行深度劫持
    this.observer(value)
    Object.defineProperty(obj,key,{
      enumerable:true,
      configurable:true,
      // 取值
      get(){
        // console.log(Dep.target,'get')
        Dep.target && dep.addSub(Dep.target);
        console.log(dep.subs)
        return value;
      },
      // 设置值
      set(newValue){
        if(value === newValue) return
        // 将数据设置成对象时，进行劫持
        that.observer(newValue);
        value = newValue;
        dep.notify();
      },
    })
  }
}
class Dep{
  constructor(){
    // 存放订阅者
    this.subs = []
  }
  // 增加订阅者
  addSub(watcher){
    this.subs.push(watcher);
  }
  notify( ){
    this.subs.forEach(watcher => watcher.update());
  }
}